<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书畅销榜</title>
    <style>
      li{
        list-style-type: none;
        height: 50px;
        width: 250px;
        border-bottom:1px #efefef solid;
        text-align: left;
        /*设置文字在方框中的位置*/
        line-height: 50px;
      }
      .c1{
        font-weight: bolder;
      }
      a{
        /*下滑线设置*/
        text-decoration: none;
        color: black;
      }
      /*当鼠标悬停时的操作*/
      a:hover{
        color: red;
      }
      /*当鼠标按下去的时候*/
      a:active{
        color: blue;
      }
      /*当鼠标离开的时候*/
      /*a:visited{
        color: black;
      }*/
     span{
        color: red;
      }
    </style>
</head>
<body>
  <ui>
    <li class="c1">图书畅销榜</li>
    <li class="c2"><span>1</span>&nbsp;&nbsp;&nbsp;<a href="#">当我足够好,才会遇见你</a></li>
    <li><span>2</span>&nbsp;&nbsp;&nbsp;<a href="#">皮囊</a></li>
    <li><span>3</span>&nbsp;&nbsp;&nbsp;<a href="#">李光耀论中国与世界</a></li>
    <li>4&nbsp;&nbsp;&nbsp;<a href="#">乖,摸摸头</a></li>
    <li>5&nbsp;&nbsp;&nbsp;<a href="#">男女内参</a></li>
  </ui>
</body>
</html>